import {createStore,Commit} from 'vuex'
import {FunctionalComponent, PropType} from 'vue'
import {getColumns,getDetailColumn,getPotList} from '@/api/index'
interface UserProps {
    isLogin: boolean,
    name?:string,
    id?:number,
}
export interface ImageProps {
    _id?: string,
    url?:string,
    createdAt: string
}
export interface ColumnProps {
    _id: string,
    title: string,
    avatar?: ImageProps,
    description: string
}

export interface PostProps {
    _id: string,
    title: string,
    excerpt?:string, // 文章摘要
    content?: string,
    createdAt:string,
    image?: ImageProps,
    column?:string
}


export interface GlobalDataProps {
    columns: ColumnProps[],
    posts: PostProps[],
    user: UserProps,
    enAbleCreate?: boolean,
    currentId?: string,
    isLoding: boolean
}

const store = createStore <GlobalDataProps>({
    state: {
        columns: [],
        posts: [],
        user: {isLogin: false},
        enAbleCreate: true,
        currentId: '0',
        isLoding: false

    },
    mutations: {
        login(state) {
            console.log('登录：',state);
            
            state.user = {...state.user,isLogin:true,name: 'hmgdec'}
        },
        loginOut(state) {
            state.user = {...state.user,isLogin:false}
        },
        setUnAbleCreate(state,data) {
            state.enAbleCreate = data
        },
        // 设置当前的columnId
        setCurrentId(state,data) {
            state.currentId = data
        },

        // 设置当前的posts数据 :PropType<PostProps>
        setPostsData(state,data) {
            state.posts = [data,...state.posts]
        },

        // 异步请求Columns列表
        fetchColumnsMutation(state,rawData) {
            state.columns = rawData.data.list
        },
        
        // 异步请求DetailColumn专栏详情
        fetchDetailColumnMutation(state,rawData) {
            // 因为专栏详情只有一条，并且后端返回的是对象，所有我们需要放到数组中
            state.columns = [rawData.data] 
        },
        // 异步请求Post列表
        fetchPostsMutation(state,rawData) {
            state.posts = rawData.data.list
        },

        // 设置loding
        setLoading(state,status) {
            state.isLoding = status
        }

    },
    actions: {
        // 获取Columns列表
      async  fetchColumns(contex) {
            try {
                const {data} = await getColumns({})
                const {commit} = contex
                commit('fetchColumnsMutation',data)
            } catch (error) {
                new Error(error)
            }
        },

        // DetailColumn专栏详情
       async fetchDetailColumn(context,params) {

            try {
                const {commit} = context
                const {data} = await getDetailColumn(params)
                commit('fetchDetailColumnMutation',data)
            } catch (error) {
                new Error(error)
            }

        },

        // 获取Post列表
       async fetchPosts(context,params) {
            try {
                const {commit} = context
                const {data}  = await  getPotList(params)
                commit('fetchPostsMutation',data)
            } catch (error) {
                new Error(error)
            }
        }
    },
    // 状态管理工具的 计算属性，方便在多个页面使用
    getters: {
        getColumnById:(state) => (id:string) => {
          return state.columns.find(c => c._id == id)  
        },

        getPostListById: (state) => (id: string) => {
            
            return state.posts.filter(c => c.column == id)
        },

        // 获取当前的Column的数据
        getCurrentColumn: (state)=>  ()=> {
            const val = state.columns.find((c:ColumnProps) => c._id == state.currentId)
            if (val) {
                return JSON.parse(JSON.stringify(val))
            }
            
        }
    }
})

export default store